<template>
  <div class="min-h-screen flex flex-col bg-gradient-to-br from-blue-50 to-purple-50">
    <!-- 顶部区域 -->
    <header class="px-6 py-8 text-center">
      <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full mx-auto mb-4 flex items-center justify-center">
        <span class="text-white text-2xl font-bold">馒</span>
      </div>
      <h1 class="text-2xl font-bold text-gray-800 mb-2">馒头AI助手</h1>
      <p class="text-gray-600 text-sm">选择你的AI助手开始对话</p>
    </header>

    <!-- 主体内容 - AI助手选择 -->
    <main class="flex-1 flex flex-col justify-center px-6 space-y-8">
      <!-- AI恋爱大师 -->
      <div class="relative">
        <button
          class="w-full bg-white rounded-3xl p-6 shadow-lg active:scale-95 transition-all duration-200 border border-pink-100"
          @click="goLoveChat"
        >
          <div class="flex items-center">
            <div class="w-16 h-16 bg-gradient-to-br from-pink-500 to-rose-600 rounded-full flex items-center justify-center flex-shrink-0">
              <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
            </div>
            <div class="ml-4 text-left flex-1">
              <h3 class="text-lg font-bold text-gray-900 mb-1">AI恋爱大师</h3>
              <p class="text-gray-600 text-sm leading-relaxed">专业的恋爱咨询和情感指导助手</p>
            </div>
            <div class="ml-2">
              <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
              </svg>
            </div>
          </div>
        </button>
      </div>

      <!-- AI超级智能体 -->
      <div class="relative">
        <button
          class="w-full bg-white rounded-3xl p-6 shadow-lg active:scale-95 transition-all duration-200 border border-blue-100"
          @click="goManusChat"
        >
          <div class="flex items-center">
            <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center flex-shrink-0">
              <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
              </svg>
            </div>
            <div class="ml-4 text-left flex-1">
              <h3 class="text-lg font-bold text-gray-900 mb-1">AI超级智能体</h3>
              <p class="text-gray-600 text-sm leading-relaxed">多功能AI助手，强大推理和工具调用</p>
            </div>
            <div class="ml-2">
              <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
              </svg>
            </div>
          </div>
        </button>
      </div>
    </main>

    <!-- 底部用户信息 -->
    <footer class="px-6 py-6">
      <div class="bg-white rounded-2xl p-4 shadow-sm border border-gray-100">
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <div class="w-10 h-10 bg-gradient-to-br from-gray-400 to-gray-600 rounded-full flex items-center justify-center">
              <span class="text-white text-sm font-medium">{{ userInitial }}</span>
            </div>
            <div class="ml-3">
              <p class="text-sm font-medium text-gray-900">{{ authStore.username }}</p>
              <p class="text-xs text-gray-500">已登录</p>
            </div>
          </div>
          <button
            @click="handleLogout"
            class="px-4 py-2 text-sm text-gray-600 bg-gray-100 rounded-full hover:bg-gray-200 transition-colors"
          >
            退出
          </button>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth'

const router = useRouter()
const authStore = useAuthStore()

// 计算属性
const userInitial = computed(() => {
  return authStore.username ? authStore.username.charAt(0).toUpperCase() : 'U'
})

// 方法
const goLoveChat = () => router.push('/mobile-love-chat')
const goManusChat = () => router.push('/mobile-manus-chat')

const handleLogout = () => {
  authStore.logout()
  router.push('/login')
}
</script>

<style scoped>
</style> 